{extend name="Public:content"}
{block name="style"}
<style type="text/css">
    #commonSearchFrom label{text-align: right; padding-top: 7px;padding-right: 0px;}
    #commonSearchFrom .search-button{text-align: center;}
</style>
{/block}
{block name="button"}
<!--工具栏 start-->
<div id="toolbar" class="row">
    <div class="col-sm-12 m-b-xs">
        <button type="button" class="btn-sm btn-info" onClick="$.Oa.reload()">
            <span class="fa fa-refresh" aria-hidden="true"></span>刷新
        </button>
        <button id="btn_add" type="button" class="btn-sm btn-success">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_delete" type="button" class="btn-sm btn-danger disabled">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
        <!--<select class="form-control">-->
        <!--<option value="all">导出全部数据</option>-->
        <!--<option value="selected">导出已选数据</option>-->
        <!--</select>-->
    </div>
</div>
<!--工具栏 end-->
{/block}
<!--搜索栏 start-->
{block name="search"}
<div class="hidden" id="commonSearchFrom">
<form id="member_search_form">
<fieldset>
<div class="row" >
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <label class="control-label col-xs-4">手机号：</label>
        <div class="col-xs-8">
            <input name="username" placeholder="请输入手机号" class="form-control">
        </div>
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <label class="control-label col-xs-4">账号：</label>
        <div class="col-xs-8" >
            <input name="nickname" placeholder="请输入账号" class="form-control">
        </div>
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <label class="control-label col-xs-4">状态：</label>
        <div class="col-xs-8">
            <select name='status' class='form-control'>
                <option value=''> 所有 </option>
                <option value='1'>启用</option>
                <option value='2'>禁用</option>
            </select>
        </div>
    </div>
</div>
<div class="row search-button">
    <div class="form-group col-xs-12">
        <!--<button type="button" class="btn btn-info" style="margin-bottom: 0px; margin-left: 10px;" onclick="member_index.search()">搜索</button>-->
        <button type="button" class="btn btn-info" onclick="member_index.search()">提交</button>
        <button type="reset" class="btn btn-default">重置</button>
    </div>
</div>
</fieldset>
</form>
</div>
{/block}
<!--搜索栏 end-->
{block name="content"}
<div class="table-responsive" style="overflow-x:initial">
    <table id="member_table" ></table>
</div>
{/block}
{block name="script"}
<script src="__STATIC__/admin/plugins/table-export/tableExport.min.js"></script>
<script src="__STATIC__/admin/plugins/bootstrap-table/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript">
    $("input[class='form-control']").keypress(function (e) {
        var e = e || window.event;
        if (e.keyCode == 13) {
            $(".btn.btn-info").click();
        }
    });
    window.member_index = {
        //定义工具栏
        search: function(){ //搜索
            var query_params = {};
            $.each($("#member_search_form").serializeArray(),function(){
                query_params[$(this).attr('name')] = $(this).attr('value');
            });
            $('#member_table').bootstrapTable('refreshOptions',{
                pageNumber : 1,
                queryParams:function(params){
                    var tmp_params = {limit:params.pageSize,page:params.pageNumber,order:params.sortOrder};
                    var query = $.extend(true,tmp_params,query_params);
                    return query;
                }
            });
            $(".columns-right").append('<button id="btnCommonSearch" class="btn btn-default" type="button" name="commonSearch" title="搜索"><i class="glyphicon glyphicon-search"></i></button>');
        },
        show: function(id){ //详情
            parent.layer.open({
                type: 2,
                title: '{$title} > 详情',
                shadeClose: false,
                shade: 0.8,
                maxmin: false, //开启最大化最小化按钮
                area: ['960px', '650px'],
                content: '{:url("$classuri/info")}?id='+id+'&iframe='+window.name,
                yes: function (index, layero){},
                end: function (){}
            });
        },
        recharge: function(id){ //充值
            parent.layer.open({
                type: 2,
                title: '{$title} > 充值',
                shadeClose: false,
                shade: 0.8,
                maxmin: false, //开启最大化最小化按钮
                area: ['960px', '650px'],
                content: '{:url("$classuri/integralRecharge")}?id='+id+'&iframe='+window.name,
                yes: function (index, layero){},
                end: function (){}
            });
        },
        //操作格式化
        opert: function(value,row){
            var rst = '';
            var info_auth = '{:auth("$classuri/info")}';
            var recharge_auth = '{:auth("$classuri/integralRecharge")}';
            var status_auth = '{:auth("$classuri/status")}';
            if(info_auth) {
                rst += '<a onclick="member_index.show('+row.id+')" class="btn btn-outline btn-default btn-xs">详情</a> ';
                rst += '<a href="{:url(\'admin/thumb/index\')}?nickname='+row.nickname+'" class="btn btn-outline btn-default btn-xs">图库</a> ';
            }
            if(recharge_auth) {
                rst += '<a onclick="member_index.recharge(' + row.id + ')" class="btn btn-outline btn-default btn-xs">充值</a> ';
            }
            if(row.status == 1 && status_auth) {
                rst += '<a onclick="$.Oa.status(this,\'string\')" data-url="{:url(\"$classuri/status\")}" data-id="'+row.id+'" data-value="2" class="btn btn-outline btn-danger btn-xs">禁用</a> ';
            }else if(status_auth){
                rst += '<a onclick="$.Oa.status(this,\'string\')" data-url="{:url(\"$classuri/status\")}" data-id="'+row.id+'" data-value="1" class="btn btn-outline btn-danger btn-xs">启用</a> ';
            }
            return rst;
        }
    }
    $('#member_table').bootstrapTable({
        toolbar: "#toolbar",
        search:true,
        showColumns: true,
        showRefresh: false,
        showExport: true,                     //是否显示导出
        exportDataType: "basic",              //basic', 'all', 'selected'.

        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        url:"{:url(\"$classuri/index\")}",
        pageNumber: 1, //初始化加载第一页，默认第一页
        pagination:true,//是否分页
        sortOrder: 'desc',
        sidePagination:'server',//指定服务器端分页
        queryParamsType : "",
        queryParams: function(params){
            return {limit:params.pageSize,page:params.pageNumber,order:params.sortOrder};
        },//参数
        pageSize:10,//单页记录数
        pageList:[10,20,30,40],//分页步进值
        // responseHandler:responseHandler,//请求数据成功后，渲染表格前的方法
        columns :[
            {checkbox:true,width: 20},
            {field:'id',title:'ID',width: 20},
            {field:'username',title:'手机号',width: 80},
            {field:'nickname',title:'账号',width: 80},
            {field:'rename',title:'真实姓名',width: 80},
//            {field:'birthday',title:'生日',width: 150},
            {field:'integral',title:'积分',width: 80},
            {field:'area',title:'地区',width: 150},
            {field:'create_at',title:'注册时间',width: 150},
            {field:'status_str',title:'状态',align:'center',width: 80,formatter:function(value,row){
                    return  row.status == 1 ? '<span class="label label-primary">启用</span>' : '<span class="label label-danger">禁用</span>';
                }},
            {field:'action',title:'操作',width: 200,formatter:member_index.opert},
        ]
    })
    // ****** 搜索相关 ******
    // 插入搜索按钮
     $(".columns-right").append('<button id="btnCommonSearch" class="btn btn-default" type="button" name="commonSearch" title="搜索"><i class="glyphicon glyphicon-search"></i></button>');
    // 搜索表单的切换显示
    $('body').on('click','#btnCommonSearch',function(){
        if ($("#commonSearchFrom").hasClass("hidden")) {
            $("#commonSearchFrom").removeClass("hidden");
        } else {
            $("#commonSearchFrom").addClass("hidden");
        }
    })
</script>
{/block}